<script setup>
import {ref, computed, onMounted} from "vue";
import {useAdminStore} from "@/stores/AdminStores.js";
import {storeToRefs} from "pinia";
import RotaModule from "@/components/share/RotaModule.vue";
import UserTimetableTable from "@/components/admin/userTimetableTable.vue";

const adminStore = useAdminStore()
const {keyList} = storeToRefs(adminStore)
const {produceRota, keyValidate} = adminStore

const data = computed(() => {
  return (keyList.value ?? []).map((item) => {
    return {
      'key': item,
      'button': '生成值班表',
    }
  })
})
const loading = ref(false)

const refreshShow = ref(true)

const adminProduceRota = (key) => {
  produceRota(key, () => {
    refreshShow.value = false
    loading.value = true;
  }, () => {
    loading.value = false
    refreshShow.value = true
  })

}

onMounted(() => {
  keyValidate();
});

const showTimetable = ref(false)

</script>

<template>
  <div>
    <el-table :data="data" border stripe>
      <el-table-column type="expand">
        <template #default="props">
          <div class="family">
            <user-timetable-table :key-props="props.row['key']"></user-timetable-table>
            <el-button type="primary" @click="adminProduceRota(props.row['key'])" style="margin: 10px"
                       :loading="loading">{{ props.row['button'] }}
            </el-button>
            <template v-if="refreshShow">
              <RotaModule :keyProps="props.row['key']" power-props="admin"></RotaModule>
            </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="密钥" prop="key"></el-table-column>

    </el-table>
  </div>
</template>

<style scoped>
.family {
  padding: 0 40px 40px;
}
</style>